<template>
  <div
    class="yt-input"
    :class="[`yt-input__${theme}`, {'is-noBorder': !border}, `is-${align}`]"
    :style="inputStyle">
    <input
      @blur="$emit('blur')"
      :class="{'is-noIcon': !clearable}"
      :type="type"
      :placeholder="placeholder"
      :disabled="_disabled"
      v-model="key"
      ref="input"/>
    <i
      class="yt-input-clear yt-icon yt-icon-input-close"
      v-if="!_disabled && clearable && key"
      @click="key = ''"/>
  </div>
</template>

<script type="text/ecmascript-6">
  import { throttle } from '../utils'

  export default {
    name: 'yt-input',
    inject: {
      ytForm: {
        default: () => ({})
      }
    },
    props: {
      /**
       *  placeholder的文字
       */
      placeholder: {
        type: String,
        default: '请输入...'
      },
      /**
       *  当前值
       *  @model
       */
      value: {
        type: [String, Number],
        default: ''
      },
      /**
       *  是否禁用输入
       */
      disabled: {
        type: Boolean,
        default: false
      },
      /**
       *  背景色
       */
      fillColor: {
        type: String,
        default: '#FFFFFF'
      },
      /**
       *  风格  dark  light
       */
      theme: {
        type: String,
        default: 'dark'
      },
      /**
       *  是否显示border
       */
      border: {
        type: Boolean,
        default: false
      },
      /**
       * 是否开启截流
       */
      throttle: {
        type: Boolean,
        default: true
      },
      /**
       * input中的type
       */
      type: {
        type: String,
        default: 'text'
      },
      /**
       * 是否可以清理输入值
       */
      clearable: {
        type: Boolean,
        default: true
      },
      /**
       * 输入的位置
       */
      align: {
        type: String,
        default: 'right'
      }
    },
    data() {
      return {
        key: this.value
      }
    },
    computed: {
      _disabled() {
        return this.disabled || (this.ytForm || {}).disabled
      },
      inputStyle() {
        return {
          backgroundColor: this.fillColor
        }
      }
    },
    methods: {
      /**
       * @public
       * @description 使input失去焦点
       * @return {void}
       */
      blur() {
        this.$refs.input.blur()
      },
      /**
       * @public
       * @description 使input获取焦点
       * @return {void}
       */
      focus() {
        this.$refs.input.focus()
      }
    },
    watch: {
      'key'(val) {
        /**
         * 双向绑定 值改变实时派发
         * @event input
         * @type {string}
         */
        this.$emit('input', val)
        const fn = (val) => {
          /**
           * 值改变时，如果开启截流事件会截流派发
           * @event change
           * @type {string}
           */
          this.$emit('change', val)
        }
        if (!this.throttle) {
          fn(val)
        } else {
          if (!this._throttleInstance) {
            this._throttleInstance = throttle(fn, 500, 2000)
          }
          this._throttleInstance(val)
        }
      },
      'value'(val) {
        this.key = val
      }
    }
  }
</script>
